<template>
    <div class="serial">
        <a-button @click="port" type="primary">摆动</a-button><br />
        <a-button @click="float" type="primary">浮力</a-button><br />
        <a-button @click="rotate" type="primary">转动</a-button><br/>
        <a-popover title="鼠标操作" type="primary" trigger="focus" placement="rightTop">
            <template #content>
                <p>鼠标左键：拖动旋转模型</p>
                <p>鼠标滑轮：缩放视角</p>
                <p>鼠标右键：拖拽视角</p>
            </template>
            <a-button>操作说明</a-button>
        </a-popover>

        <!-- <ul ref="ulDiv">
            <li>x</li>
            <li>y</li>
            <li>z</li>
        </ul> -->
    </div>
</template>
<script setup>
import eventbus from '@/until/eventbus';
import mqttd from '@/api/mqtt'
import { onMounted, h } from 'vue';
import { SmileOutlined } from '@ant-design/icons-vue';
import { notification } from 'ant-design-vue';

function port() {
    eventbus.emit('view')
    const wsServer = new WebSocket('ws://localhost:3000')
    wsServer.onmessage = function (e) {//后台返回消息的时候触发
        // obj.value=e.data
        console.log(e.data);
        var str = e.data
        let arr = str.split(",")
        // let arr = Array.from(e.data)
        // console.log(n);
        eventbus.emit('axiel', arr)
    };
}

function float() {
    mqttd(['GNSS_0_G'])

}

function rotate() {
    eventbus.emit('rotate')
}


onMounted(async () => {
    // let arr = ['GNSS_0_G']
})
</script>
<style>
button {
    position: fixed;
    z-index: 1001;
}
</style>